<template>
	<div>
		<el-container>
			<el-header class="elheader">
			   博客后台管理平台
			</el-header>
			<el-container style="height: auto; border: 1px solid #eee">
			  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			    <el-menu router :default-openeds="id">
			      <el-submenu index="1">
			        <template slot="title"><i class="el-icon-user-solid"></i>个人中心</template>
			        <el-menu-item-group>
			          <el-menu-item index="/mysels_information"><i class="el-icon-user"></i>个人信息</el-menu-item>
			          <el-menu-item index="/message_manage"><i class="el-icon-chat-square"></i>留言管理</el-menu-item>
					  <el-menu-item index="/friend"><i class="el-icon-thumb"></i>友链管理</el-menu-item>
			        </el-menu-item-group>
			      </el-submenu>
				  <el-submenu index="2">
				    <template slot="title"><i class="el-icon-s-order"></i>博客管理</template>
				    <el-menu-item-group>
				      <el-menu-item index="/insert_blog"><i class="el-icon-edit-outline"></i>发布博客</el-menu-item>
				      <el-menu-item index="/show_blog"><i class="el-icon-tickets"></i>查看博客</el-menu-item>
					  <el-menu-item index="/manage_tags"><i class="el-icon-price-tag"></i>标签管理</el-menu-item>
					  <el-menu-item index="/manage_type"><i class="el-icon-discount"></i>分类管理</el-menu-item>
				    </el-menu-item-group>
				  </el-submenu>
				  <el-submenu index="3">
				    <template slot="title"><i class="el-icon-s-data"></i>数据统计</template>
				    <el-menu-item-group>
				      <el-menu-item index="/show_blog_data"><i class="el-icon-data-line"></i>博文数据</el-menu-item>
				    </el-menu-item-group>
				  </el-submenu>
				  <el-submenu index="4">
				    <template slot="title"><i class="el-icon-s-tools"></i>用户管理</template>
				    <el-menu-item-group>
				      <el-menu-item index="/add_user"><i class="el-icon-place"></i>添加用户</el-menu-item>
					  <el-menu-item index="/show_user"><i class="el-icon-more-outline"></i>查看用户</el-menu-item>
				    </el-menu-item-group>
				  </el-submenu>
			    </el-menu>
			  </el-aside>
			  
			  <el-container>			    
			    <el-main>
			      <!-- <el-table :data="tableData">
			        <el-table-column prop="date" label="日期" width="140">
			        </el-table-column>
			        <el-table-column prop="name" label="姓名" width="120">
			        </el-table-column>
			        <el-table-column prop="address" label="地址">
			        </el-table-column>
			      </el-table> -->
				  <router-view></router-view>
			    </el-main>
			  </el-container>
			</el-container>
		</el-container>
	</div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  
  .elheader{
  	text-align: center; 
  	font-size: 30px; 
  	font-weight: bold;
  	line-height:height;
  	letter-spacing: 10px;
  }
</style>

<script>
  export default {
    data() {
      return {
		id:['1']
      }
    },
	mounted() {
	    setTimeout(() => {
	      window.L2Dwidget.init({
	          pluginRootPath: 'live2dw/',
	          pluginJsPath: 'lib/',
	          pluginModelPath: 'live2d-widget-model-z16/assets/',
	          tagMode: false,
	          debug: false,
	          model: { jsonPath: '../live2dw/live2d-widget-model-z16/assets/z16.model.json' },
	          display: { position: 'right', width: 300, height: 600 },
	          mobile: { show: true },
	          log: false
	          })
	    }, 1000)
	},
  };
</script>
